<template>
    <div class="bg-slate-800 h-screen text-white flex flex-col">
        <!-- Logo区域 -->
        <div class="h-[64px] flex items-center justify-center border-b border-slate-700">
            <span v-if="!isCollapse" class="text-xl font-bold">管理后台</span>
            <span v-else class="text-xl font-bold">M</span>
        </div>
        
        <!-- 菜单区域 -->
        <div class="flex-1 overflow-auto">
            <el-menu
                :default-active="activeMenu"
                :collapse="isCollapse"
                :collapse-transition="false"
                background-color="#1e293b"
                text-color="#ffffff"
                active-text-color="#3b82f6"
                class="border-none"
                router
                @select="handleSelect"
            >
                <el-menu-item index="/admin/index">
                    <el-icon><Monitor /></el-icon>
                    <template #title>仪表盘</template>
                </el-menu-item>
                
                <el-menu-item index="/admin/article-list">
                    <el-icon><Document /></el-icon>
                    <template #title>文章管理</template>
                </el-menu-item>
                
                <el-menu-item index="/admin/category-list">
                    <el-icon><Folder /></el-icon>
                    <template #title>分类管理</template>
                </el-menu-item>
                
                <el-menu-item index="/admin/tag-list">
                    <el-icon><PriceTag /></el-icon>
                    <template #title>标签管理</template>
                </el-menu-item>
                
                <el-menu-item index="/admin/blog-setting">
                    <el-icon><Setting /></el-icon>
                    <template #title>博客设置</template>
                </el-menu-item>
            </el-menu>
        </div>
    </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import { 
    Monitor, 
    Document, 
    Folder,
    PriceTag,
    Setting 
} from '@element-plus/icons-vue'

// 接收props
defineProps({
    isCollapse: {
        type: Boolean,
        default: false
    }
})

const route = useRoute()

// 当前激活的菜单项
const activeMenu = ref(route.path)

// 监听路由变化，更新激活菜单
watch(() => route.path, (newPath) => {
    activeMenu.value = newPath
})

// 菜单选择事件
const handleSelect = (index) => {
    activeMenu.value = index
}
</script>

<style scoped>
.el-menu {
    border-right: none;
}

:deep(.el-menu-item) {
    color: #ffffff;
}

:deep(.el-menu-item:hover) {
    background-color: #334155 !important;
}

:deep(.el-menu-item.is-active) {
    background-color: #334155 !important;
    color: #3b82f6 !important;
}

:deep(.el-menu-item .el-icon) {
    color: inherit;
}
</style>
